<template>
  <div class="rolling-broadcast">
    <van-swipe
      ref="swipeRef"
      class="swipe"
      :style="{ height: `${height}px` }"
      :show-indicators="false"
      :touchable="false"
      vertical
      :autoplay="autoplay"
      :loop="false"
      :height="rowHeight"
      :initial-swipe="pageData.initialSwipe"
      @change="dragEnd"
    >
      <van-swipe-item
        v-for="(item, index) in currentList"
        :key="index"
        class="swipe-item"
      >
        <slot :item="item" :index="index" :rowEndIdx="currentScrollIdx"></slot>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script setup lang="ts" name="rollingBroadcast">
import { useCloned } from "@vueuse/core";

const emit = defineEmits(["dragEnd"]);
const props = withDefaults(
  defineProps<{
    list: any;
    autoplay?: string | number;
    rowHeight?: string | number; // 行高
    height?: string | number; // box高度
    loop: boolean; // 时候循环
  }>(),
  {
    loop: false, // 当 list > rows 才会生效
    list: [],
    autoplay: 2000,
    rowHeight: 50,
    height: 100,
  }
);
const swipeRef = ref();
const pageData = reactive({
  isDragEnd: false, // 是不是最后一个

  initialSwipe: 0,
});
let endIdx = 0;

// 可以展示的个数
const rows = Math.floor(Number(props.height) / Number(props.rowHeight));
// 渲染数量
const max = computed(() => {
  return rows * 2;
});

//  当前要渲染的数据
let resultList: any = [];
const xh = () => {
  // 当滚动～～可以整除的时候回到原点
  if (currentList.value.length % props.list.length === 0) {
    swipeRef.value.swipeTo(0, { immediate: true });
    pageData.isDragEnd = false;
    return resultList;
  } else {
    let syArr = [];
    if (props.list.length - currentList.value.length > rows) {
      syArr = props.list.slice(endIdx + 1, endIdx + rows);
      endIdx = endIdx + rows - 1;
      // console.log(
      //   endIdx,
      //   "---syArr0000---",
      //   syArr.length,
      //   "---",
      //   currentList.value.length
      // );
      // console.log("--syArr--", syArr);
      const { cloned } = useCloned(syArr, { manual: true });
      resultList = currentList.value.concat(cloned.value);
    } else {
      syArr = props.list.slice(endIdx + 1, props.list.length);
      endIdx = props.list.length - 1;
      // console.log("---syArr111111---", syArr.length);
      // console.log("--syArr--", syArr);
      const { cloned } = useCloned(syArr, { manual: true });
      const { cloned: l } = useCloned(props.list, { manual: true });
      resultList = currentList.value.concat(cloned.value).concat(l.value);
    }

    // console.log("-此时：", resultList);

    pageData.isDragEnd = false;
    return resultList;
  }
};
const currentListFn: any = () => {
  if (props.list.length > 0) {
    if (props.loop) {
      if (props.list.length > rows) {
        if (pageData.isDragEnd) {
          return xh();
        }
        // 不超过渲染数量，且设置了循环
        else if (props.list.length <= max.value) {
          const { cloned } = useCloned(props.list, { manual: true });
          return props.list.concat(cloned.value);
        }
        // 只能进来一次，
        else if (resultList.length === 0) {
          endIdx = 2 * rows - 1; // 每次裁剪最后一个索引值
          // console.log("--rows--", rows);

          return props.list.slice(0, 2 * rows);
        } else {
          // pageData.isDragEnd === false 的时候返回原数组
          return currentList.value;
        }
      } else {
        return props.list; // 不够一屏幕不循环
      }
    } else {
      return props.list;
    }
  } else {
    return [];
  }
};

const currentList: any = ref([]);

watch(
  () => props.list,
  (newVal) => {
    if (newVal) {
      currentList.value = currentListFn();
    }
  },
  {
    immediate: true,
  }
);

watch(
  () => pageData.isDragEnd,
  (newVal) => {
    if (newVal) {
      if (props.list.length > 0 && props.loop && props.list.length > rows) {
        currentList.value = xh();
      }
    }
  }
);
// 是不是可视范围内最后一个
// const rowEnd = computed(() => {
//   if (currentList.value.length > rows) {
//     return currentScroll.value;
//   }
//   return false;
// });

// 滚动到最后一个
const currentScrollIdx = ref(rows);
const dragEnd = (index: number) => {
  currentScrollIdx.value = index + rows;
  // console.log("-- index --", index, "---", currentScrollIdx.value);
  // index + rows 代表 要展示最后一个了，+1 是为了提前加载数据防止卡顿; 如果数据少不能 + 1
  if (
    index + rows + (props.list.length <= max.value ? 0 : 1) ===
    currentList.value.length
  ) {
    pageData.isDragEnd = true;
  }
  // emit("dragEnd", index);
};
</script>

<style scoped lang="scss">
.rolling-broadcast {
  .swipe {
    &-item {
    }
  }
}
</style>
